import { View, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React, { useRef, useEffect, useState } from "react";
import { PickerView, DatePicker, NoData } from "@/components";
import useCityPicker from "@/uses/useCityPicker";
import { useOverlay, useDatePicker, useCountyDataContext } from "@/uses";

const PickerScreen = function() {
  const cityPicker = useCityPicker();
  const datePicker = useDatePicker();
  const overlay = useOverlay();
  const dateRef = useRef<Date>();

  const { countyData } = useCountyDataContext();


  const popup = () => {
    overlay.show(() => <NoData></NoData>, {
      type: 'fade'
    })
  }

  return (
    <View>
      <Text style={{ marginLeft: "35px", marginBottom: "30px" }}>性别选择</Text>
      <PickerView
        style={{ marginBottom: "50px" }}
        linkage={true}
        dataSource={[{ label: "男", value: "1" }, { label: "女", value: "2" }]}
        onChange={value => {}}
      />
      <Text style={{ marginLeft: "35px", marginBottom: "30px" }}>城市选择</Text>
      <PickerView
        style={{ marginBottom: "50px" }}
        linkage={true}
        dataSource={countyData}
        column={3}
        onChange={value => {}}
      />
      <Text style={{ marginLeft: "35px", marginBottom: "30px" }}>时间选择</Text>
      <DatePicker
        style={{ marginBottom: "50px" }}
        mode="date"
        onChange={value => {}}
      />

      <Button
        size="default"
        type="default"
        onClick={() => {
          cityPicker.show({
            title: "选择城市",
            dataSource: countyData,
            column: 3,
            onConfirm: data => {
              return data.map((item: any) => {
                return { ...item, value: item.value };
              });
            },
            onChange: () => {}
          });
        }}
      >
        <Text>点击选择城市</Text>
      </Button>

      <Button
        style={{ marginTop: "30px", marginBottom: "50px" }}
        size="default"
        type="default"
        onClick={() => {
          datePicker.show({
            defaultValue: dateRef.current,
            onConfirm: value => {
              dateRef.current = value;
            }
          });
        }}
      >
        <Text>点击选择时间</Text>
      </Button>

      <Button
        style={{ marginTop: "30px", marginBottom: "50px" }}
        size="default"
        type="default"
        onClick={() => {
          popup()
        }}
      >
        <Text>overlay</Text>
      </Button>
      {overlay.overlayView}
    </View>
  );
};

export default PickerScreen;
